<template>
  <div class="wrapper">
    <h-button class="button-class" type="rimless" shadow @click.native="handleConfirm($event, false)">Confirm</h-button>
    <h-button class="button-class purple" shadow @click.native="handleConfirm($event, true)">Confirm (alone)</h-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { HButton, ConfirmPlugin } from 'hippius'

Vue.use(ConfirmPlugin)

export default {
  components: {
    HButton,
  },
  methods: {
    showConfirm (ops = { noMask: false, buttonAlone: false }) {
      this.$confirm.show({
        title: ops.title || '提示',
        content: ops.content || '提示内容',
        noMask: ops.noMask,
        buttons: [
          {
            type: 'cancel',
            text: '取消',
            color: '',
            bgColor: '',
            alone: ops.buttonAlone,
          },
          {
            type: 'confirm',
            text: '确认',
            color: '',
            bgColor: '',
            alone: ops.buttonAlone,
          },
        ],
        onShow: ops.onShow,
        onHide: ops.onHide,
        onCancel: ops.onCancel,
        onConfirm: ops.onConfirm,
      })
    },
    handleConfirm (e, bool) {
      this.showConfirm({
        content: '',
        buttonAlone: bool,
        onShow: () => {
          console.log('on-show')
        },
        onHide: () => {
          console.log('on-hide')
        },
        onCancel: () => {
          console.log('on-cancel')
        },
        onConfirm: () => {
          console.log('on-confirm')
        },
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.wrapper {
  padding: 20px 6%;

  .button-class {
    width: 45%;
    margin: 6px 2.5%;
    font-size: 14px;
    color: cadetblue;
    border-radius: 3px;
    float: left;
  }

  .purple {
    color: #fff;
    background-color: #7e57c2;
    border: 1px solid #7e57c2;
  }
}
</style>
